<!--
 * @Description: 
 * @Author: 胡康进
 * @Date: 2021-07-17 10:59:44
 * @LastEditors: Zourongsheng
 * @LastEditTime: 2021-07-17 11:07:51
-->

<template>
 <div id="map_container"></div>
</template>

<script>
export default {
 data() {
 return {
 };
 },
 computed: {},
 methods: {},
 created() {},
 mounted() {
     var map = initMap({
        tilt: 45,
        heading: 0,
        center: [114.31,30.52],
        zoom: 8.5,
        style: purpleStyle
    });
    var citys = [
        '武汉市',
        '黄石市',
        '十堰市',
        '宜昌市',
        '襄阳市',
        '鄂州市',
        '荆门市',
        '孝感市',
        '荆州市',
        '黄冈市',
        '咸宁市',
        '随州市',
        '恩施市'
    ];

    var randomCount = 100; // 模拟的飞线的数量
    var curve = new mapvgl.BezierCurve();

    var data = [];

    // 构造数据
    while (randomCount--) {
        var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
        var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);

        curve.setOptions({
            start: [startPoint.lng, startPoint.lat],
            end: [endPoint.lng, endPoint.lat]
        });
        var curveModelData = curve.getPoints();

        data.push({
            geometry: {
                type: 'LineString',
                coordinates: curveModelData
            },
            properties: {
                count: Math.random()
            }
        });
    }

    var view = new mapvgl.View({
        map: map
    });
    var flylineLayer = new mapvgl.FlyLineLayer({
        style: 'chaos',
        step: 0.3,
        color: 'rgba(33, 242, 214, 0.3)',
        textureColor: function (data) {
            return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
        },
        textureWidth: 20,
        textureLength: 10
    });
    view.addLayer(flylineLayer);
    flylineLayer.setData(data);
   }
      }
</script>
<style scoped>

    #map_container {
       height: calc((100vh - 50px));
    }
    </style>